<template>
	<view class="container" style="padding:20rpx;">
		<view style="padding-bottom: 100rpx;">
			<view>
				<view style="margin-bottom: 20px;">
					<!-- store info begin -->
					<list-cell :hover="false"  padding="50rpx 30rpx">
						<view class="w-100 d-block align-items-center">
							<view class="text-center ">
								取餐码
							</view>
							<view class="text-center text-color-base font-size-extra-lg" style="margin: 20rpx 20rpx;">
								{{order.takeFoodCode}}
							</view>
						<!-- 	<view class="text-center">
								桌号：{{order.seatNum}}
							</view> -->
						</view>
					</list-cell>
					<!-- store info end -->		
				</view>
				<view >
					<!-- goods begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
							<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.goods" :key="index">
								<view class="d-flex flex-column w-60 overflow-hidden">
									<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.name }}</view>
									<view class="font-size-sm text-color-assist text-truncate">{{ good.propertyText }}</view>
								</view>
								<view class="d-flex w-40 align-items-center justify-content-between pl-30">
									<view class="font-size-base text-color-base">x{{ good.num }}</view>
									<view class="font-size-base text-color-base font-weight-bold">￥{{ good.price }}</view>
								</view>
							</view>
						</view>
					</list-cell>
					<!-- goods end -->
				</view>
				<view >
					<!-- payment and amount begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>支付方式</view>
								<view class="font-weight-bold">{{ order.payName }}</view>
							</view>
							<view class="pay-cell">
								<view>金额总计</view>
								<view class="font-weight-bold">￥{{ order.total }}</view>
							</view>
						</view>
					</list-cell>
					<!-- payment and amount end -->
				</view>
				<view  style="margin-bottom: 20px;">
					<!-- order info begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>订单号</view>
								<view class="font-weight-bold">{{ order.orderNo }}</view>
							</view>	
							<view class="pay-cell">
								<view>订单状态</view>
								<view class="font-weight-bold"> {{ OrderStatus(order.status)}}</view>
							</view>	
							<view class="pay-cell">
								<view>支付流水号</view>
								<view class="font-weight-bold">{{ order.payCode }}</view>
							</view>	
						
							<view class="pay-cell">
								<view>取单号</view>
								<view class="font-weight-bold">{{ order.takeFoodCode }}</view>
							</view>
							<view class="pay-cell">
								<view>下单时间</view>
							<!-- 	<view class="font-weight-bold">{{ $util.formatDateTime(order.created_at) }}</view> -->
								<view class="font-weight-bold">{{order.createdAt}}</view>
							</view>
							<view class="pay-cell">
								<view>预约时间</view>
							<!-- 	<view class="font-weight-bold">{{ $util.formatDateTime(order.created_at) }}</view> -->
								<view class="font-weight-bold">{{order.edc}}</view>
							</view>
						</view>
					</list-cell>
					<!-- order info end -->
				</view>
				<!-- order other info begin -->
				<list-cell :hover="false"  last>
					<view class="w-100 d-flex">
						<view class="pay-cell">
							<view>备注:</view>
							<view class="font-weight-bold">{{ order.remarks }}</view>
						</view>
					</view>
				</list-cell>
				<!-- order other info end -->
			</view>
		
		</view>
		
	</view>
</template>

<script>

import listCell from '@/components/list-cell/list-cell';
const {getOrderById} = require("@/api/api/order.js")
export default {
	components: {
		listCell
	},
	data() {
		return {
			order: {}
		};
	},
	onLoad({ id }) {
		getOrderById(id).then(res=>{
			console.log(res.data)
			this.order=res.data
		})
	},
	methods: {
	},
	computed:{
	  OrderStatus() {
		  return function(code) {
			let name = "";
			switch (code) {
			  case "1"||1:
				name = "待处理";
				break;
			  case "2"||2:
				name = "已处理";
				break;
			  case "3"||3:
				name = "已发货";
				break;
			  case "4"||4:
				name = "已取消";
			}
			return name;
		  };
		},
	}
};
</script>

<style lang="scss" scoped>
@mixin arch {
	content: "";
	position: absolute;
	background-color: $bg-color;
	width: 30rpx;
	height: 30rpx;
	bottom: -15rpx;
	z-index: 10;
	border-radius: 100%;
}

.section {
	position: relative;
	
	&::before {
		@include arch;
		left: -15rpx;
	}
	
	&::after {
		@include arch;
		right: -15rpx;
	}
}

.pay-cell {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: $font-size-base;
	color: $text-color-base;
	margin-bottom: 40rpx;

	&:nth-last-child(1) {
		margin-bottom: 0;
	}
}

.invote-box {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	image {
		width: 30rpx;
		height: 30rpx;
	}
}

.btn-box {
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	z-index: 11;
	
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 10rpx;
		flex: 1;
		flex-shrink: 0;
		
		button {
			width: 100%;
			border-radius: 50rem !important;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}
	}
}
</style>
